<template>
  <view class="familyCircleDetails allColumnCenter">
    <header-title ref="headerTitle" isDisplayBack :title="options.is_flag == 1 ? '个人圈':'家庭圈'" is-fixed
                  background="#f5f5f5"
                  @getPageHeight="getPageHeight">
      <template>
        <view class="familyCircleDetails_headerTitle">
          <text class="familyCircleDetails_headerTitle_text">张三的家庭</text>
        </view>
      </template>
    </header-title>
    <view :style="{height:`${headerHeight}px`}"></view>
    <view class="familyCircleDetails_content mt-25">
      <textarea v-model="form.content" class="familyCircleDetails_content_textarea"
                placeholder="家庭趣事生活感悟～" auto-height :maxlength="500"></textarea>
    </view>
    <view class="familyCircleDetails_tips row items-center justify-between mt-9">
      <view class="familyCircleDetails_tips_left ml-20">
        <text class="familyCircleDetails_tips_left_text">
          最多可输入500字
        </text>
      </view>
      <view class="familyCircleDetails_tips_right mr-20">
        <text class="familyCircleDetails_tips_right_text">
          {{ `${form.content.length}/500` }}
        </text>
      </view>
    </view>
    <view class="familyCircleDetails_imageList mt-30">
      <view class="familyCircleDetails_imageList_content">
        <view class="familyCircleDetails_imageList_content_list allColumnCenter justify-center"
              v-for="(item,index) in form.imageList" :key="index" @click="previewPhoto(item)">
          <image :src="item" class="familyCircleDetails_imageList_content_list_imageList"></image>
        </view>
        <view class="familyCircleDetails_imageList_content_list allColumnCenter justify-center"
              v-if="form.imageList.length < 9" @click="uploadPhoto">
          <image src="/static/shiqin-images/edit.png" class="familyCircleDetails_imageList_content_list_image"></image>
          <text class="familyCircleDetails_imageList_content_list_text mt-15">添加照片</text>
        </view>
      </view>
    </view>
    <view v-if="options.is_flag == 1" class="familyCircleDetails_synchronous row items-center justify-between mt-30"
          @click.stop="()=>{form.type = !form.type}">
      <view class="familyCircleDetails_synchronous_left ml-27">
        <text class="familyCircleDetails_synchronous_left_text">
          同步到家庭圈
        </text>
      </view>
      <view class="familyCircleDetails_synchronous_right mr-27" v-if="form.type"></view>
      <view class="familyCircleDetails_synchronous_rightConfirm mr-27" v-else></view>
    </view>
    <view class="familyCircleDetails_confirm allRowCenter mt-62" @click="publishFamilyCircles">
      <text class="familyCircleDetails_confirm_text">发布</text>
    </view>
  </view>
</template>

<script>
import HeaderTitle from "../../components/shiqinComponents/pageComponents/headerTitle.vue";
import {releaseWechatMoments, uploadGroupImage} from "../../api/shiqinAPI";

export default {
  components: {HeaderTitle},
  data() {
    return {
      // 头部高度
      headerHeight: 0,
      form: {
        content: '',
        imageList: [],
        type: false
      },
      options: {}
    };
  },
  onLoad(options) {
    this.options = options
  },
  onReady() {
    this.$nextTick(() => {
      this.$refs.headerTitle.getPageHeight()
    })
  },
  methods: {
    getPageHeight(number) {
      this.headerHeight = number
    },
    // 预览照片
    previewPhoto(info) {
      uni.previewImage({
        urls: this.form.imageList,
        current: info
      })
    },
    // 上传照片
    uploadPhoto() {
      if(this.form.imageList.length >= 9){
        uni.showToast({
          title: '最多只能上传9张图片',
          icon: 'none'
        })
        return
      }
      this.$util.uploadImageChange({count: 9 - this.form.imageList.length, url: 'upload/image'}, (res => {
        this.form.imageList.push(res.data.url)
      }))
    },
    publishFamilyCircles() {
      if (!this.form.content) {
        uni.showToast({
          title: '请输入内容',
          icon: 'none'
        })
        return
      }
      releaseWechatMoments({
        member_id:this.options.member_id,
        family_id: this.$store.state.shiqinStore.selectedId,
        content: this.form.content,
        image: this.form.imageList.join(','),
        type: this.form.type ? 2 : 1
      }).then(res => {
        if (res.status == '200') {
          uni.showToast({
            title: '发布成功',
            icon: 'none'
          })
          this.$store.dispatch('setFamilyDetail')
          setTimeout(() => {
            uni.navigateBack()
          }, 1000)
        } else {
          uni.showToast({
            title: res.msg,
            icon: 'none'
          })
        }
      })
    }
  },
}
</script>

<style lang="scss">
.familyCircleDetails {
  width: 750rpx;
  min-height: 100vh;
  background: $secondaryPages;
  overflow: hidden;

  .familyCircleDetails_headerTitle {
    position: absolute;
    bottom: -26rpx;
    left: 50%;
    transform: translateX(-50%);

    .familyCircleDetails_headerTitle_text {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 20rpx;
      color: #A0A0A0;
    }
  }

  .familyCircleDetails_content {
    width: 702rpx;
    background: #FFFFFF;
    border-radius: 20rpx 20rpx 20rpx 20rpx;

    .familyCircleDetails_content_textarea {
      margin: 22rpx 20rpx;
      width: 662rpx;
      min-height: 448rpx;
    }
  }

  .familyCircleDetails_tips {
    width: 702rpx;

    .familyCircleDetails_tips_left {
      .familyCircleDetails_tips_left_text {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 28rpx;
        color: #A0A0A0;
      }
    }

    .familyCircleDetails_tips_right {
      .familyCircleDetails_tips_right_text {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 28rpx;
        color: #A0A0A0;
      }
    }
  }

  .familyCircleDetails_imageList {
    width: 702rpx;

    .familyCircleDetails_imageList_content {
      width: 596rpx;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-column-gap: 10rpx;
      grid-row-gap: 10rpx;

      .familyCircleDetails_imageList_content_list {
        width: 192rpx;
        height: 192rpx;
        background: #FFFFFF;
        border-radius: 20rpx 20rpx 20rpx 20rpx;
        overflow: hidden;

        .familyCircleDetails_imageList_content_list_imageList {
          max-width: 192rpx;
          max-height: 192rpx;
        }

        .familyCircleDetails_imageList_content_list_image {
          width: 66rpx;
          height: 66rpx;
        }

        .familyCircleDetails_imageList_content_list_text {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 24rpx;
          color: #A0A0A0;
        }
      }
    }
  }

  .familyCircleDetails_synchronous {
    width: 702rpx;
    height: 80rpx;
    background: #FFFFFF;
    border-radius: 15rpx 15rpx 15rpx 15rpx;

    .familyCircleDetails_synchronous_left {
      .familyCircleDetails_synchronous_left_text {
        font-family: Heiti SC, Heiti SC;
        font-weight: 500;
        font-size: 30rpx;
        color: #4B4B4B;
      }
    }

    .familyCircleDetails_synchronous_right {
      width: 26rpx;
      height: 26rpx;
      border-radius: 13rpx 13rpx 13rpx 13rpx;
      border: 6rpx solid #FF4206;
    }

    .familyCircleDetails_synchronous_rightConfirm {
      width: 30rpx;
      height: 30rpx;
      border-radius: 36rpx 36rpx 36rpx 36rpx;
      border: 2rpx solid #2F2F2F;
    }
  }

  .familyCircleDetails_confirm {
    width: 362rpx;
    height: 80rpx;
    background: #FF4206;
    border-radius: 50rpx 50rpx 50rpx 50rpx;

    .familyCircleDetails_confirm_text {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 30rpx;
      color: #FFFFFF;
    }
  }
}
</style>
